<template>
  <el-page-header @back="goBack">
    <template #content>
      <span class="text-large font-600 mr-3">我的订单</span>
    </template>
  </el-page-header>

  <div class="search-form-wrapper">
    <el-form class="search-form" ref="searchForm" :model="searchForm" inline>
      <el-form-item label="订单状态">
        <el-select v-model="searchForm.status" placeholder="请选择订单状态" @change="fetchOrders" style="width: 150px" >
          <el-option label="全部" :value="null"></el-option>
          <el-option label="待付款" :value="1"></el-option>
          <el-option label="待发货" :value="2"></el-option>
          <el-option label="待收货" :value="3"></el-option>
          <el-option label="已完成" :value="4"></el-option>
          <el-option label="已取消" :value="5"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>

  <el-table :data="orders" style="width: 100%">
    <el-table-column prop="ordertime" label="下单时间" width="180">
      <template #default="{row}">
        {{ formatDate(row.ordertime) }}
      </template>
    </el-table-column>
    <el-table-column prop="billnum" label="订单编号" width="100"/>
    <el-table-column prop="productname" label="商品名称"/>
    <el-table-column prop="totalprice" label="商品总价" width="100"/>
    <el-table-column prop="address" label="地址" width="100"/>
    <el-table-column prop="status" label="订单状态" width="100">
      <template #default="{row}">
        {{ statusLabel(row.status) }}
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="200">
      <template #default="{row}">
        <el-button v-if="row.status === 1" type="primary" size="small" @click="payOrder(row)">付款</el-button>
        <el-button v-if="row.status === 1" type="warning" size="small" @click="cancelOrder(row)">取消订单</el-button>
        <el-button v-else type="info" size="small">{{ statusLabel(row.status) }}</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
import moment from "moment";

export default {
  name: 'OrderPage',
  data() {
    return {
      searchForm: {
        status: null,
        userid: parseInt(localStorage.getItem("userId"), 10), // 用户ID
      },
      orders: [],
    };
  },
  methods: {
    fetchOrders() {
      // 设置请求头，确保Content-Type为application/json
      const config = {
        headers: {
          'Content-Type': 'application/json'
        }
      };
      const searchForm=this.searchForm
      axios.post(`http://localhost:9099/order/select`,searchForm,config).then(response => {
        this.orders = response.data.data;
      }).catch(error => {
        ElMessage.error("获取订单失败: " + error.message);
      });
    },
    cancelOrder(order) {
      // 发送付款请求...
      axios.post(`http://localhost:9099/order/cancel`, { id: order.id })
          .then(res => {
            if (res.data.code == 200) {
            ElMessage({
              message: res.data.msg,
              type: 'success',
              duration: 2000
            })
              window.location.reload(); // 刷新页面
          } else {
            ElMessage({
              message: res.data.msg,
              type: 'error',
              duration: 2000
            })
          }
          })

    },
    payOrder(order) {
      // 发送付款请求...
      axios.post(`http://localhost:9099/order/pay`, { id: order.id })
          .then(res => {
            if (res.data.code == 200) {
              ElMessage({
                message: res.data.msg,
                type: 'success',
                duration: 2000
              })
              window.location.reload(); // 刷新页面
            } else {
              ElMessage({
                message: res.data.msg,
                type: 'error',
                duration: 2000
              })
            }
          })

    },
    formatDate(dateStr) {
      return moment(dateStr).format('YYYY-MM-DD HH:mm:ss');
    },
    statusLabel(status) {
      const statuses = {
        1: "待付款",
        2: "待发货",
        3: "待收货",
        4: "已完成",
        5: "已取消",
      };
      return statuses[status] || "未知状态";
    },
    goBack() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.fetchOrders();
  },
};
</script>
<style scoped>
.search-form-wrapper {
  margin-top: 20px;
}

.search-form {
  display: flex;
  justify-content: flex-start;
}


</style>